<!-- 用户协议详情 -->
<template>
	<view class="container">
		<view class="status_bar" :style="{height:height+50+'px'}">
			<text @tap="navBack" class="cell-more yticon icon-zuo"></text>

			<text class="tit">{{title}}</text>
		</view>
		<view class="content">
			<rich-text :nodes="detailObj.description"></rich-text>
		</view>
		<view class="btnBox" v-if="btnShow">
			<view class="btn"  @tap="goChange">{{btnText}}</view>
		</view>
		<view class="showModel" v-if="showModel">
			<view class="content-box">
				<text class="xxx" @tap="assisGo">X</text>
				<view class="title">{{showModelObj.title}}</view>
				<view class="msg">{{showModelObj.msg}}</view>
				<view class="btn-model" @tap="assisGo">确认</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		protocolDetail
	} from '@/api/public.js'
	import { userPromoterCheck, userPromoterApply } from '@/api/user.js'
	export default {
		components: {},
		data() {
			return {
				height: null, //获取的状态栏高度
				title: "",
				id: null,
				detailObj: {},
				btnShow: false,
				shellId: null,
				btnText: '确认',
				showModel: false,
				showModelObj: {
					title: '申请成功',
					msg: '恭喜你成为推广小助手，接下来可以用二维码进行推广哦～'
				}
			}
		},
		onLoad(option) {
			if (option.type == '1') {
				this.title = "黑贝壳说明",
					this.id = 2
			} else if (option.type == '2') {
				this.title = "余额说明",
					this.id = 1
			} else if (option.type == '3') {
				this.title = "钱包说明",
					this.id = 6
			} else if (option.type == '4') {
				this.title = "蓝贝壳说明",
					this.id = 3
			} else if (option.type == '5') {
				this.title = "红贝壳说明",
					this.id = 4
			} else if (option.type == '6') {
				this.title = "黄贝壳说明",
					this.id = 5
			} else if(option.type == '24') {
				
				this.title = '小助手说明'
				this.id = 24
				this.btnShow = true
				this.btnText = '申请小助手'
				
			} else {
				this.title = option.tit;
				this.id = Number(option.id);
			}
			if (option.shellId) {
				this.btnShow = true
				this.shellId = option.shellId
			}
			this.protocolDetail();

			var _this = this;
			// 获取手机状态栏高度
			uni.getSystemInfo({
				success: function(data) {
					// 将其赋值给this
					_this.height = data.statusBarHeight;
				}
			})
		},
		methods: {
			assisGo(){
				this.showModel = false;
				return setTimeout(()=>{
					uni.navigateTo({
						url: `/pages/center/assistant/assistant`
					})
				},500)
			},
			protocolDetail() {
				protocolDetail(this.id).then(res => {
					this.detailObj = res.data;
				})
			},
			navBack() {
				// 				uni.navigateTo({
				// 					url: '/pages/center/help/rules'
				// 				})
				uni.navigateBack()
			},
			goChange() {
				if(this.id == 24){
					// userPromoterCheck().then(res => {
					// })
					if(!uni.getStorageSync('userInfo').card_id){//未认证
						uni.navigateTo({
							url: `/pages/center/accountSet/certification/certification?back=${true}`
						})
					}else{
						userPromoterApply({}).then(res => {
							if(res.status == 200){
								this.showModelObj.msg = res.msg;
								this.showModel = true
								// setTimeout(()=>{
								// 	uni.navigateTo({
								// 		url: `/pages/center/assistant/assistant`
								// 	})
								// },1000)
							}
						})
					}
				}else{
					uni.redirectTo({
						url:"/pages/center/shell/shellExchange?id=" + this.shellId
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;

		.cell-more {
			font-size: 52rpx;
			width: 56rpx;
			position: relative;
			left: 20rpx;

		}

		.content {
			padding: 250rpx 30rpx 150rpx;
		}

		.status_bar {
			position: fixed;
			top: 0;
			width: 100%;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-top: 40rpx;
			z-index: 99;

		}

		/* 调整状态栏标题的位置 */
		.tit {
			margin: auto;
			position: relative;
			right: 30rpx;
		}

		.btnBox {
			position: fixed;
			left: 0;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			width: 100%;
			height: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			box-shadow: 10rpx 0 10rpx rgba(0, 0, 0, 0.1);
			background-color: #fff;

			.btn {
				width: 690rpx;
				height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				background-color: $theme-color;
				font-size: 30rpx;
				color: #fff;
			}
		}
		.showModel{
			background:rgba(0,0,0, .2);
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			overflow: hidden;
		
			.content-box{
				text-align: center;
				border-radius:10rpx;
				width: 70%;
				height: 400rpx;
				background-color: #fff;
				margin: 500rpx auto;
				position: relative;
				z-index: 99;
				color: black;
				color: #333;
			}
			.xxx{
				position: absolute;
				top: 22rpx;
				right: 22rpx;
				
			}
			.title{
				padding-top: 50rpx;
				font-size:36rpx;
				font-weight:600;
			}
			.msg{
				width: 66%;
				margin: 45rpx auto 0;
				font-size:24rpx;
				line-height:40rpx;
			}
			.btn-model{
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #57BE6A;
				font-size:32rpx;
				color: #fff;
				text-align: center;
				font-weight:500;
				border-radius:40rpx;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 30rpx;
				margin: auto;
			}
				
		}
	}
</style>
